<template>
	<view class="content">
		<!-- 按钮盒子：头部点击跳转 -->
		<view class="head-box">
			<template v-for="(item, index) in headData" :key="index">
				<view class="booking-box" @click="goBooking(item.title)">
					<uni-icons :type="item.titleIcon" ></uni-icons>
					<span>{{ item.title }}</span>
				</view>
			</template>
		</view>
		<!-- 当前预约：卡片效果 -->
		<booking-card/>
		<view class="recent-booking-text">最近预约</view>
		<!-- 最近预约：盒子列表 -->
		<view class="recent-booking-box">
			<!-- 单个最近预约 -->
			<view class="first-recent-booking">
				<!-- 单个最近预约：左侧信息 -->
				<view class="left-detail-box">
					<span style="font-size: 40rpx;font-weight: 520;margin: 20rpx 0 20rpx 20rpx;">D区左002号</span>
					<span style="margin: 0 0 20rpx 20rpx;">翻斗花园图书馆</span>
				</view>
				<!-- 单个最近预约：右侧信息 -->
				<view class="right-detail-box">
					<view class="time-detail-box">
						<span style="margin: 20rpx;">11:00-15:00</span>
						<span style="margin: 20rpx;">4小时</span>
					</view>
					<button @click="onceBooking" type="primary" plain="true" size="mini" style="border-radius: 50rpx;margin: 20rpx 20rpx 20rpx 20rpx">再次预约</button>
				</view>
			</view>
			<view class="first-recent-booking">
				<!-- 单个最近预约：左侧信息 -->
				<view class="left-detail-box">
					<span style="font-size: 40rpx;font-weight: 520;margin: 20rpx 0 20rpx 20rpx;">D区左002号</span>
					<span style="margin: 0 0 20rpx 20rpx;">翻斗花园图书馆</span>
				</view>
				<!-- 单个最近预约：右侧信息 -->
				<view class="right-detail-box">
					<view class="time-detail-box">
						<span style="margin: 20rpx;">11:00-15:00</span>
						<span style="margin: 20rpx;">4小时</span>
					</view>
					<button type="primary" plain="true" size="mini" style="border-radius: 50rpx;margin: 20rpx 20rpx 20rpx 20rpx"  @click="onceBooking">再次预约</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed, nextTick, watch, watchEffect, onMounted } from 'vue';
import bookingCard from '@/components/booking/booking-card.vue'
// 静态数据：头部菜单
const headData = reactive([
	{
		title: '预约座位',
		titleIcon: 'calendar',
		route: '',
		iconSize: '50'
	},
	{
		title: '快速预约',
		titleIcon: 'map',
		route: '',
		iconSize: '50'
	},
	{
		title: '预约记录',
		titleIcon: 'calendar',
		route: '',
		iconSize: '50'
	},
	{
		title: '规则说明',
		titleIcon: 'help',
		route: '',
		iconSize: '50'
	}
]);

// 功能函数：再次预定
const onceBooking = () =>{
	uni.showToast({
	  title: '预约成功',
	  icon: 'none',
	  duration: 2000,
	})
}
// 功能函数：跳转预定页面
const goBooking = (title) => {
	if(title == "预约座位"){
		uni.switchTab({
			url: '/pages/booking/booking'
		});
	}

}
</script>
 
<style lang="scss" scoped>
@mixin flex1 {
	display: flex;
	align-items: center;
	justify-content: center;
}
@mixin flex2 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
@mixin flex3 {
	display: flex;
	align-items: center;
	justify-content: space-around;
}
@mixin flex4 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
@mixin flex5 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
@mixin flex6 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.content {
	min-height: 1146.5rpx;
	background: rgb(239, 242, 250);
}
.head-box {
	@include flex3;
	background-color: #ffffff;
	padding-bottom: 10rpx;
	.booking-box {
		@include flex4;
	}
}

// // “最近预约”：文字样式
.recent-booking-text {
	margin: 15rpx 35rpx 15rpx 35rpx;
	color: #acacac;
	font-weight: 550;
}
// "最近预约"列表：样式
.recent-booking-box {
	max-height: 1000rpx;
	@include flex2;
	// 单个"最近预约"
	.first-recent-booking {
		width: 680rpx;
		max-height: 1000rpx;
		margin: 10rpx 35rpx 0 35rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		border: #acacac 1px solid;
		margin-bottom: 10rpx;
		box-shadow: 0rpx 2rpx 4rpx #afafaf, 0rpx -2rpx 4rpx #a5a5a5, -2rpx 0rpx 4rpx #a5a5a5, 2rpx 0rpx 4rpx #a5a5a5;
		@include flex5;
		// 最近预约单个卡片：左侧信息
		.left-detail-box {
			@include flex2;
		}
		.right-detail-box {
			@include flex2;
			align-items: flex-end;
			.time-detail-box {
				color: #767676;
				margin-top: 22rpx;
			}
		}
	}
}
</style>
